<template>
  <div>
    <base-page ref="basePage" :basepage="basePage">
      <el-button slot="button" @click="setMenu">设置菜单</el-button>
      <el-button slot="button" @click="setJur">设置权限</el-button>
    </base-page>
    <template>
      <el-dialog v-dialogDrag :visible.sync="menusTreeVisible" append-to-body center title="设置菜单">
        <div style="height : 200px;overflow:auto">
          <el-tree
            :data="menusData"
            :default-checked-keys="menusChecked"
            show-checkbox
            node-key="id"
            ref="menusTree"
            highlight-current
            :props="menusTreeProps"
          ></el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="menusTreeVisible = false">取 消</el-button>
          <el-button type="primary" @click="menusSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </template>
    <template>
      <el-dialog :visible.sync="jursTreeVisible" width="40%" append-to-body center title="设置权限">
        <div style="height : 200px;overflow:auto">
          <el-tree
            :data="jursData"
            :default-checked-keys="jursChecked"
            show-checkbox
            node-key="id"
            ref="jursTree"
            highlight-current
            :props="jursTreeProps"
          ></el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="jursTreeVisible = false">取 消</el-button>
          <el-button type="primary" @click="jursSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import BasePage from "../BasePage.vue";
export default {
  name: "RouterManage",
  components: {
    "base-page": BasePage,
  },
  data() {
    return {
      basePage: {
        // URL
        url: "roleOperation",
        // 查询条件
        searchConf: [
          [
            {
              title: "角色名称",
              type: "input",
              prop: "roleName",
            },
            {
              title: "是否有效",
              type: "select",
              prop: "isFlag",
              data: [
                { value: "1", label: "有效" },
                { value: "0", label: "无效" },
              ],
            },
          ],
        ],
        buttonConf: {
          insertShow: true,
          deleteShow: true,
        },
        // table列
        tableColumnConf: {
          columns: [
            { prop: "roleName", label: "角色名称" },
            { prop: "createName", label: "创建人" },
            { prop: "createTime", label: "创建时间" },
            { prop: "isFlag", label: "是否有效" },
          ],
          operation: {
            state: true,
            defs: [],
          },
        },
        detailConf: {
          title: "角色信息",
          data: [],
        },
        // 新增修改form表单设置
        formConf: {
          formData: {
            roleName: "",
            available: "",
          },
          width: "50%",
          title: "角色",
          data: [
            {
              title: "角色名称",
              type: "input",
              prop: "roleName",
            },
            {
              title: "是否有效",
              type: "select",
              prop: "isFlag",
              data: [
                { value: "1", label: "有效" },
                { value: "0", label: "无效" },
              ],
            },
          ],
          rules: {
            roleName: [
              {
                validator: (rule, value, callback) => {
                  if (value === "") {
                    callback(new Error("名称不能为空"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
            isFlag: [
              {
                validator: (rule, value, callback) => {
                  if (value === "") {
                    callback(new Error("不能为空"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
          },
        },
      },
      menusData: [],
      menusChecked: [],
      menusTreeVisible: false,
      menusTreeProps: {
        label: "name",
        children: "childrens",
      },
      jursData: [],
      jursChecked: [],
      jursTreeVisible: false,
      jursTreeProps: {
        label: "name",
        children: "childrens",
      },
    };
  },
  methods: {
    // 设置菜单点击提交按钮时调用
    menusSubmit() {
      // 获取选中值  包含父节点包含半选中
      var menusChecked = this.$refs.menusTree.getCheckedNodes(false, true);
      var user = JSON.parse(localStorage.user);
      var role = this.$refs.basePage.getCurrentRow();
      var data = new Array();
      menusChecked.forEach((e) => {
        var item = {};
        item.createBy = user.id;
        item.roleId = role.id;
        item.menuId = e.id;
        data.push(item);
      });
      this.COMMON.httpPost(
        this,
        "menuRoleOperation/insertBatch",
        {
          list: data,
          roleId: role.id,
        },
        (result) => {
          if (result.result === "SUCCESS") {
            this.menusTreeVisible = false;
          }
        },
        (result) => {}
      );
    },
    jursSubmit() {
      console.log(this.$refs.jursTree.getCheckedNodes());
      // 获取选中值  不包含父节点不包含半选中
      var menusChecked = this.$refs.jursTree.getCheckedNodes(false, false);
      var user = JSON.parse(localStorage.user);
      var role = this.$refs.basePage.getCurrentRow();
      var data = new Array();
      menusChecked.forEach((e) => {
        if (e.id === undefined) {
          return;
        }
        var item = {};
        item.createBy = user.id;
        item.roleId = role.id;
        item.jurisdictionId = e.id;
        data.push(item);
      });
      this.COMMON.httpPost(
        this,
        "roleJurisdictionOperation/insertBatch",
        {
          list: data,
          roleId: role.id,
        },
        (result) => {
          if (result.result === "SUCCESS") {
            this.jursTreeVisible = false;
          }
        },
        (result) => {}
      );
    },
    setMenu() {
      var role = this.$refs.basePage.getCurrentRow();
      if (role == undefined) {
        return;
      }
      this.menusTreeVisible = true;
      // 需要在现实弹窗后调用setCheckedKeys方法
      this.$nextTick(() => {
        this.$refs.menusTree.setCheckedKeys([]);
      });

      this.COMMON.httpPost(
        this,
        "menuRoleOperation/selectListExParent",
        { roleId: role.id, del: "0", available: "1" },
        (result) => {
          if (result.result === "SUCCESS") {
            this.menusChecked = result.list;
          }
        },
        (result) => {}
      );
    },
    setJur() {
      var role = this.$refs.basePage.getCurrentRow();
      if (role == undefined) {
        return;
      }
      this.jursTreeVisible = true;
      this.$nextTick(() => {
        this.$refs.jursTree.setCheckedKeys([], false);
      });

      this.COMMON.httpPost(
        this,
        "roleJurisdictionOperation/selectList",
        { roleId: role.id },
        (result) => {
          if (result.result === "SUCCESS") {
            var data = result.list;
            var array = new Array();
            data.forEach((e) => {
              array.push(e.jurisdictionId);
            });
            this.jursChecked = array;
          }
        },
        (result) => {}
      );
    },
    getJursTree() {
      this.COMMON.httpPost(
        this,
        "jurisdictionInterfaceOperation/getTree",
        {},
        (result) => {
          if (result.result === "SUCCESS") {
            var data = result.data;
            var array = new Array();
            for (var item in data) {
              var each = {};
              each.name = item;
              each.childrens = data[item];
              array.push(each);
            }
            this.jursData = array;
          }
        },
        (result) => {}
      );
    },
    getMenusTree() {
      this.COMMON.httpPost(
        this,
        "menuOperation/getAllMenus",
        {},
        (result) => {
          if (result.result === "SUCCESS") {
            this.menusData = result.data.childrens;
          }
        },
        (result) => {}
      );
    },
    event(event) {
      switch (event) {
        case "insert-success": {
        }
      }
    },
    selectChange(type, pro, value) {
      if (pro === "type") {
        if (value === "1") {
          this.formConf.data[1]["show"] = true;
        } else {
          this.formConf.data[1]["show"] = false;
        }
      }
    },
    formatter(data, prop, index) {
      switch (prop) {
        case "isFlag": {
          if (data == "1") {
            return "有效";
          } else {
            return "无效";
          }
        }
        default: {
          return data;
        }
      }
    },
  },
  activated: function () {
    this.getMenusTree();
    this.getJursTree();
  },
};
</script>
<style>
</style>